<template>
<div class="container__">
    <van-tabs sticky @change="onClick" :active="active" :line-width="45" swipe-threshold="5">
        <van-tab title="拼拼优课"></van-tab>
        <van-tab title="砍价秒抢"></van-tab>
        <van-tab title="视频"></van-tab>
        <van-tab title="专栏"></van-tab>
        <van-tab title="资讯"></van-tab>
        <van-tab title="红包"></van-tab>
    </van-tabs>
    <ul>
      <li v-for="( item, index) in list" :key="index"  >
         <div class="list" v-if=" item.data.article_type==5" @click="toDetails1(item.data)">
            <van-card :price=" item.data.price" :origin-price=" item.data.prime_price" :desc="'会员减'+ item.data.discount+'元'" :title=" item.data.title" :thumb=" item.data.thumb" thumb-mode="aspectFill">
            </van-card>
            <div class="dianzan">
                <img @click.stop="like(item.data,index)" :src="img+'/zan1.png'" alt="">
            </div>
          </div>
          <div class="list" v-if=" item.data.article_type==6" @click="toDetails2(item.data)">
              <van-card :price=" item.data.price" :origin-price=" item.data.prime_price" :desc="'会员减'+ item.data.discount+'元'" :title=" item.data.title" :thumb=" item.data.thumb" thumb-mode="aspectFill"></van-card>
              <div class="dianzan">
                <img @click.stop="like(item.data,index)" :src="img+'/zan1.png'" alt="">
              </div>
          </div>
          <div class="zhuanlan" v-if=" item.data.article_type==1" @click="toDetails3( item.data,1)">
              <van-card custom-class="zhuanlanvard" :desc=" item.data.description" :title="item.data.title" :thumb=" item.data.images[0]" thumb-mode="aspectFill"/>
              <div class="dianzan">
                  <img :src="img+'/zan1.png'" alt="" @click.stop="like(item.data,index)">
              </div>
          </div>
          <div class="zhuanlan" v-if=" item.data.article_type==2" @click="toDetails3( item.data,2)">
              <van-card custom-class="zhuanlanvard" :desc=" item.data.description" :title=" item.data.title " :thumb="item.data.images[0]" thumb-mode="aspectFill"/>
              <div class="dianzan">
                  <img :src="img+'/zan1.png'" alt="" @click.stop="like(item.data,index)">
              </div>
          </div>
          <div class="videolist" v-if=" item.data.article_type==4" @click="toDetails4( item.data)">
              <div class="videoitem">
                  <div class="top">
                    <span>{{ item.data.video_desc}}</span>
                    <img :src="img+'/zan1.png'" alt="" @click.stop="like(item.data,index)">
                  </div>
                  <div class="video">
                      <video :src=" item.data.video" @click.stop></video>
                  </div>
              </div>
          </div>
          <div class="zhuanlan" v-if=" item.data.type==8" @click="toDetails5( item.data)">
              <van-card custom-class="zhuanlanvard"  :title="item.data.desc" :thumb=" item.data.thumb[0]" thumb-mode="aspectFill"/>
              <div class="dianzan">
                  <img :src="img+'/zan1.png'" alt="" @click.stop="like(item.data,index)">
              </div>
          </div>
      </li>
    </ul>
    
    <div class="que" v-if="isempty">
        <img  :src="img+'/que/no_collect@2x.png'" alt="">
    </div>
</div>
</template>

<script>
import { getcoll } from "@/api/my";
import { collectA } from "@/api/operate";
export default {
  data() {
    return {
      lastpage: "",
      active: 0,
      list: [],
      isempty: false,
      img: this.$URL.imgurl,
      page:1,
      load:false,
      articleType:5
    };
  },
  methods: {
    getlist() {
      this.isempty = false;
      getcoll({page:this.page,type:this.articleType}).then(res => {
          if(res.code==200){
            this.lastpage=res.data.total
            this.page==1?this.list=res.data.data:this.list=this.list.concat(res.data.data)
            if(this.lastpage>this.page){
              this.load=true
            }else{
              this.load=false
            }
          }else if(res.code==201){
            this.isempty = true;
            this.list = [];
          }
      })
      .catch(err => {
        this.isempty = true;
        this.list = null;
      });
    },
    onClick(e){
      this.list = [];
      if(e.target.index==0){
        this.articleType=5
      }else if(e.target.index==1){
        this.articleType=6
      }else if(e.target.index==2){
        this.articleType=4
      }else if(e.target.index==3){
        this.articleType=1
      }else if(e.target.index==4){
        this.articleType=2
      }else if(e.target.index==5){
        this.articleType=8
      }
      this.active=e.target.index;
      this.getlist() 
    },
    like(info,index){
        wx.showModal({
          title: '提示',
          content: '确定取消收藏？',
          showCancel: true,
          cancelText: '取消',
          cancelColor: '#000000',
          confirmText: '确定',
          confirmColor: '#3CC51F',
          success: (result) => {
              if (result.confirm) {
                  let data={};
                  data.id=info.id
                  data.type=info.article_type;
                  collectA(data).then(res=>{
                      if(res.code==200){
                          wx.showToast({
                          title: '',
                          success: (result) => {
                            this.list.splice(index,1)
                          },
                          fail: () => {},
                          complete: () => {}
                        });
                      }
                  })
              }
          },
          fail: () => {},
          complete: () => {}
      });
    },
    toDetails1(info){
       let url = "/pages/pinDetail/main?id="+info.id;
       mpvue.navigateTo({ url });
    },
    toDetails2(info){
       let url = "/pages/bargainDetail/main?id="+info.id;
       mpvue.navigateTo({ url });
    },
    toDetails3(info,isz){

      let url="../speacilDetail/main?isz="+isz+"&id="+info.id+"&keType="+info.article_type;
      mpvue.navigateTo({url})
    },
    toDetails4(info){
       let url="../videoDetail/main?id="+info.id+"&keType="+info.article_type;
       mpvue.navigateTo({url})
    },
    toDetails5(info){
       let url="../redbag/main?id="+info.id;
       mpvue.navigateTo({url})
    },
    
  },
  onLoad(){
      Object.assign(this.$data, this.$options.data())
      this.getlist();
  },
  onReachBottom() {
      if (this.load){
         this.page += 1
         this.getlist()
      }
      
  },
};
</script>

<style lang="scss">
.container__ {
  background-color: #fff;
  min-height: 100vh;
  font-size: 16px;
  // padding: 40px 15px;
  box-sizing: border-box;

  .que {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 220px);

    img {
      width: 203px;
      height: 162px;
    }
  }

  .videolist {
    padding: 0 15px;
    display: flex;
    flex-direction: column;

    .videoitem {
      padding: 20px 0;
      box-sizing: border-box;
      border-bottom: 1px solid #ddd;

      .top {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #333;
        font-weight: bold;
        margin-bottom: 15px;
      }

      img {
        height: 17px;
        width: 17px;
      }
    }

    .video {
      video {
        width: 100%;
        height: 150px;
      }
    }
  }

  .van-tabs__wrap {
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.07);
  }

  // padding: 0 0 15px 0;
  .van-tabs__line {
    // width: 173px!important;
    height: 2px;
    background: rgba(70, 183, 255, 1);
    border-radius: 1px;
  }

  .zhuanlan {
    position: relative;

    .van-card {
      margin: 0 15px;
      padding: 10px 0;
    }

    .dianzan {
      position: absolute;
      height: 17px;
      width: 16px;

      img {
        height: 100%;
        width: 100%;
      }

      bottom: 10px;
      right: 20px;
    }

    .zhuanlanvard {
      background-color: #fff;
      border-bottom: 1px solid #ddd;
      // height: 110px;
      padding: 10px 15px;

      .van-card__thumb {
        width: 110px !important;
        height: 110px !important;
      }

      .van-card__img {
        width: 110px;
        height: 110px;
      }

      .van-card__title {
        font-size: 14px;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        margin-bottom: 10px;
        overflow: hidden;
        line-height: 16px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .van-card__desc {
        font-size: 12px;
        font-weight: 500;
        color: #666666;
      }
    }
  }

  .list {
    position: relative;

    .dianzan {
      position: absolute;
      height: 17px;
      width: 16px;

      img {
        height: 100%;
        width: 100%;
      }

      bottom: 10px;
      right: 20px;
    }

    .van-card {
      margin: 0 15px;
      padding: 10px 0;
      background-color: #fff;
      border-bottom: 1px solid #ddd;

      .van-card__thumb {
        width: 154px;
        height: 110px;
      }

      .van-card__img {
        width: 154px;
        height: 110px;
      }

      .van-card__content {
        justify-content: space-around;
        flex-direction: column;
        display: flex;

        .van-card__title {
          font-size: 14px;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
          // margin-bottom: 10px;
          max-height: 32px;
          overflow: hidden;
          line-height: 16px;
        }

        .van-card__desc {
          font-size: 14px;
          font-weight: 500;
          color: #1a84fb;
          // margin-bottom: 24px;
        }

        .van-card__price {
          font-size: 15px;
          color: #e9b55e;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
